<template>
  <div class="app-container">
    <FormCom class="form-search" ref="search" :columns="queryColumns" labelWidth="3em" v-show="showSearch"/>
    <div class="flr mb8">
      <div class="flbox">
        <el-button type="primary" plain @click="handleAdd">新增</el-button>
        <el-button type="warning" plain @click="handleExport">导出</el-button>
      </div>
      <div class="flone">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </div>
    </div>
    <TableCom :columns="tableColumns" :options="tableOptions" @getList="getList"></TableCom>
  </div>
</template>

<script>
  import indexVue from '@/config/indexVue';

  const changeToSlug = (d)=>{
    if(d.cate && d.deployTime){
      d.slug = [d.cate,d.deployTime.replace(/\-/g,''),_.UUID()].join('-');
    }
  }
  const editColumns = [
    {text: "分类", name: "cate", type: "select",size:12,options:"_web_cate",onChange:changeToSlug},
    {text: "日期", name: "deployTime", type: "date",size:6,onChange:changeToSlug},
    {text: "排序", name: "index", type: "input",size:6},
    {text: "编码", name: "slug", type: "input",size:12},
    {text: "标题", name: "title", type: "input",size:12},
    {text: "内容", name: "html", type: "ueditor"},
    {text: "附件", name: "attachment", type: "upload",limit:10},
    {text: "简介", name: "content", type: "textarea"},
    {text: "图标", name: "pic", type: "uploadImg",value:"",accept:"image/*",limit:1},
  ]
  const editRule = {
    slug: ["required"] ,
    title: ["required"]
  }

  export default {
    name: "Web",
    mixins:[indexVue],
    data() {
      this.actionName = "web";
      this.editColumns = editColumns;
      this.editRule = editRule;
      this.queryColumns = [
        { text:"编码",name:"slug",type:"input",onKeyup:this.handleQuery},
        { text:"分类",name:"cate",type:"select",options:"_web_cate",onChange:this.handleQuery},
        { text:"标题",name:"title",type:"input",onKeyup:this.handleQuery},
        { type:"label",searchButton:{listQuery:this.handleQuery, listReset:this.resetQuery}}
      ]
      this.tableColumns = [
        { type:"index",fixed:true },
        {"prop":"slug","label":"编码","width":180},
        {"prop":"title","label":"标题","minWidth":160},
        //{"prop":"html","label":"内容","width":100,render(){return ""}},
        // {"prop":"remark","label":"备注","minWidth":100},
        {"prop":"content","label":"简介","width":200},
        {"prop":"index","label":"排序","width":80},
        {"prop":"cate","label":"分类","width":100,options:"web_cate"},//,options:"_webCate"
        {"prop":"deployTime","label":"发布时间","width":160},
        {"prop":"updateTime","label":"修改时间","width":160},
        {"prop":"createTime","label":"创建时间","width":160},
        { label:"操作",prop:"_",width:"120",align:"center",fixed:"right",className:"",options:[
            {
              text:"修改",
              props:{class:'primary'},
              onClick:this.handleUpdate
            },
            {
              text:"删除",
              props:{class:'danger'},
              onShow(r){ return r.slug.indexOf("index_")==-1 },
              onClick:this.handleDelete
            },
          ]
        }
      ]
      //
      return {}
    },
    mounted() {
      this.getList();
    },
    methods: {
      /** 查询列表 */
      getList() {
        let pm = this.$refs.search.getData();
        pm = Object.assign(_.pick(this.tableOptions,['pageNum','pageSize']),pm);
        pm.index = 1;
        this.api(`${this.actionName}.list`,pm,this.tableOptions).then((response)=>{
          this.tableOptions.data = response.rows;
          this.tableOptions.total = response.total;
          this.$forceUpdate();
        })
      },
      /** 新增按钮操作 */
      handleAdd() {
        let pm = this.$refs.search.getData();
        this.dialogEdit({
          row:{cate:pm.cate,attachment:[],deployTime:_.MOMENT().format("YYYY-MM-DD"),index:"1"},
          PATH_SAVE:`web.add`,
          width:"940px",
          size:24,
          labelWidth:"4em",
          columns:this.editColumns,
          rules:this.editRule,
          formatter(d){
            d.files = JSON.stringify(d.attachment?.map((v)=>({name:v.name,url:v.url}))||[]);
            return d;
          }
        },()=>{
          this.getList();
        })
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.api("web.get",row.id).then((res)=>{
          let data = res.data;
          data.attachment = JSON.parse(data.files||'[]');
          this.dialogEdit({
            row:data,
            PATH_SAVE:`web.edit`,
            width:"940px",
            size:24,
            labelWidth:"4em",
            columns:this.editColumns,
            rules:this.editRule,
            formatter(d){
              d.files = JSON.stringify(d.attachment?.map((v)=>({name:v.name,url:v.url}))||[]);
              return d;
            }
          },()=>{
            this.getList();
          })
        })
      },
    }
  };
</script>
